<template>
  <div class="w-full h-110px relative py-18px box-border border-t bg-white border-#E5E5E5 px-18px">
    <div class="w-32px h-32px absolute-center !left-[20px] z-2 cursor-pointer swiper-button-prev1">
      <img class="h-full" src="@/assets/left1.png" alt="" />
    </div>
    <div
      class="w-32px h-32px absolute-center !left-[calc(100%-20px)] z-2 cursor-pointer swiper-button-next1"
    >
      <img class="h-full rotate-180" src="@/assets/left1.png" alt="" />
    </div>

    <Swiper
      :modules="[Navigation]"
      :slides-per-view="3"
      :space-between="0"
      :navigation="navigation"
    >
      <swiper-slide v-for="item in list" :key="item.id">
        <div
          :class="[
            'w-218px mr-18px max-w-200px h-74px bg-#F5F7F8 rounded-12px p-8px box-border flex flex-row items-center cursor-pointer',
            activeId === item.id && '!bg-#7733FF !text-white'
          ]"
          @click="handleActiveImg(item.id)"
        >
          <img
            :src="item.game?.image_cover"
            :alt="item.game?.name"
            class="w-46px h-58px rounded-6px object-cover"
          />
          <div class="ml-8px flex flex-col justify-center w-130px">
            <div
              :class="[
                'w-130px text-14px h-16px leading-16px text-#242633 font-bold truncate',
                activeId === item.id && '!text-white'
              ]"
            >
              {{ item.game?.name }}
            </div>
            <div class="mt-8px h-18px flex flex-row">
              <img src="@/assets/money.png" alt="" class="w-18px h-18px" />
              <div class="ml-4px text-18px h-18px leading-18px font-bold text-#FFBB33">
                {{ item.gold_coin }}
              </div>
              <div
                :class="[
                  'ml-1px mt-5px text-11px h-11px leading-11px font-500 text-#767676',
                  activeId === item.id && '!text-white'
                ]"
              >
                /{{ getPlayTime(item) }}
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </Swiper>
  </div>
  <div class="w-full p-18px box-border flex flex-col bg-white rounded-bl-16px rounded-br-16px">
    <div class="flex flex-row">
      <img
        :src="selectSkill?.game?.image_cover"
        alt=""
        class="w-84px h-106px rounded-12px object-cover"
      />
      <div class="ml-16px flex flex-col">
        <div class="mt-5px h-32px leading-32px text-32px font-bold text-#333333">
          {{ selectSkill?.game?.name }}
        </div>
        <div class="mt-10px h-16px flex flex-row items-center">
          <img src="@/assets/mark.png" alt="rating" class="w-16px h-16px" />
          <div class="ml-4px text-16px font-bold text-#333333">
            {{ selectSkill?.score || '暂无评分' }}
          </div>
          <div class="mx-6px w-1px h-16px bg-#E4E4E4"></div>
          <div class="text-16px font-500 text-#525566">订单</div>
          <div class="ml-3px text-16px font-500 text-#525566">{{ selectSkill?.order_count }}</div>
        </div>
        <div class="mt-10px h-16px flex flex-row items-center">
          <img src="@/assets/money.png" alt="coin" class="w-16px h-16px" />
          <div class="ml-4px h-16px leading-16px text-16px font-bold text-#FF9B00">
            {{ selectSkill?.gold_coin }}
            <span class="text-16px font-normal text-#525566">/{{ getPlayTime(selectSkill) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-19px flex flex-row items-center">
      <div class="w-220px h-54px relative" v-if="!isMe" @click="handlePlaceOrder">
        <button
          class="w-220px h-54px rounded-27px text-20px font-bold text-#7733FF bg-white border border-#7733FF transition-all hover:shadow-lg mr-13px"
        >
          下单
        </button>
      </div>
      <template v-else>
        <button
          class="mr-13px w-220px h-54px rounded-27px bg-gradient-to-r from-[#999] to-[#aaa] flex flex-row justify-center items-center transition-all hover:shadow-lg"
          @click="() => {}"
        >
          <!-- <img src="@/assets/chat.png" alt="chat" class="w-22px h-22px" /> -->
          <div class="ml-7px text-20px font-bold text-white">修改游戏</div>
        </button>
        <button
          class="w-220px h-54px rounded-27px bg-gradient-to-r from-#7733FF to-#FF4DC4 flex flex-row justify-center items-center transition-all hover:shadow-lg"
          @click="handleAddSkill"
        >
          <!-- <img src="@/assets/chat.png" alt="chat" class="w-22px h-22px" /> -->
          <div class="ml-7px text-20px font-bold text-white">添加游戏</div>
        </button>
      </template>
    </div>
  </div>
  <AddSkill v-model:visible="isShowAddSkill" />
</template>
<script setup>
import { ref, computed } from 'vue'
import { Navigation } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import AddSkill from './add-skill.vue'
import useAuth from '@/hooks/auth'
import 'swiper/css'
const { isMe } = useAuth()
const props = defineProps(['list', 'selectSkill'])
const emits = defineEmits(['change', 'placeOrder'])
const handlePlaceOrder = () => {
  emits('placeOrder')
}
const handleActiveImg = (id) => {
  // activeId.value = id
  emits('change', id)
}
const isShowAddSkill = ref(false)
const getPlayTime = (skill) => {
  const time = (skill.play_time === 1 ? '' : skill.play_time) ?? ''
  if (skill?.type == 0) {
    return time + '分钟'
  }
  if (skill?.type == 1) {
    return time + '局'
  }
  if (skill?.type == 2) {
    return time + '天'
  }
}
const activeId = computed(() => {
  return props.selectSkill.id
})
const navigation = ref({
  nextEl: '.swiper-button-next1',
  prevEl: '.swiper-button-prev1'
})
const handleAddSkill = () => {
  isShowAddSkill.value = true
}
</script>
<style lang="less" scopeds></style>
